<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-row class="card-container">
    <el-col :span="10" class="aside" :style="{backgroundColor:theme.bgcolor}"><span
      style="line-height: 60px">{{title}}</span></el-col>
    <el-col :span="14">
      <el-tooltip placement="top" :content="endVal+unit">
        <el-row class="mymain" :style="{color:theme.bgcolor,fontSize: countSize, fontWeight: countWeight}">
          <span style="line-height: 40px" :id="idName">{{startVal}}</span>
          <span>{{ units}}{{ unit }}</span></el-row>
      </el-tooltip>
      <el-row class="myfooter" :class="[inc>=0?'green':'red']"><span
        style="line-height: 20px">{{footTitle}}:{{inc}}%</span></el-row>
    </el-col>
  </el-row>
</template>

<script>
  import CountUp from 'countup.js'
  import {mapState, mapGetters} from 'vuex';

  function transformValue(val) {
    let data = {'val': val, 'unit': ''};
    data.decimals = val >= 10000 ? 2 : 0;
    if (val >= 10000 && val < 100000000) {
      data.val = (val / 10000).toFixed(2);
      data.unit = '万';
    }
    if (val >= 100000000) {
      data.val = (val / 100000000).toFixed(2);
      data.unit = '亿';
    }
    return data;
  }

  export default {
    data() {
      return {
        units: '',
        demo: {}
      };
    },
    mounted() {

      this.$nextTick(() => {
        setTimeout(() => {
          let res = transformValue(this.endVal);
          let endVal = res.val;
          this.units = res.unit;
          this.demo = new CountUp(this.idName, this.startVal, endVal, res.decimals, this.duration, this.options);
          if (!this.demo.error) {
            this.demo.start();
          }
          //
        }, this.delay);
      });
    },
    computed: {
      ...mapState({
        theme: state => state.app.theme,
      })
    },
    watch: {
      endVal(val,oldval) {
          let res = transformValue(val);
          let endVal = res.val;
          this.units = res.unit;
          this.demo = new CountUp(this.idName,oldval, endVal, res.decimals, this.duration, this.options);
          if (!this.demo.error) {
            this.demo.start();
          }
      }
    },
    name: 'InfoCard',
    props: {
      idName: String,
      title: String,
      footTitle: String,
      unit: {
        type: String,
        default: "元"
      },
      inc: {
        default: 0
      },
      className: String,
      startVal: {
        type: Number,
        default: 0
      },
      endVal: {
        required: true
      },
      decimals: {
        default: 0
      },
      duration: {
        type: Number,
        default: 2
      },
      delay: {
        type: Number,
        default: 500
      },
      options: {
        type: Object,
        default: () => {
          return {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.'
          };
        }
      },
      color: {
        type: String,
        default: '#6699cc'
      },
      countSize: {
        type: String,
        default: '20px'
      },
      countWeight: {
        type: Number,
        default: 800
      },
      introText: [String, Number]
    }
  }
</script>

<style scoped>
  .card-container {
    border: 1px ridge;
    -moz-border-radius: 25px;
    marginBottom: 10px;

  }

  .myfooter {
    text-align: center;
    background-color: #C8C8C8;
    font-size: 10px;
    height: 20px;
    font-weight: 900;
    bottom: 0px;
  }

  .green {
    color: green;
  }

  .red {
    color: red;
  }

  .mymain {
    font-size: 20px;
    text-align: center;
    color: #2d8cf0;
    background-color: white;
    font-weight: 800;
    height: 40px;
  }

  .aside {
    background-color: #2d8cf0;
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    height: 60px;
    color: white;
    word-wrap: break-word;
  }
</style>
